<template>
	<!-- 我的报名   赛事， 活动  任务 组件-->
	<view class="">
		<view class="register_p" v-for="(item, index) in list">
			<!-- 订单 -->
			<view class="order" @click="todetail(item.id, item.active_info, item.club_id)">
				<view class="order_pic">
					<image :src="item.active_info.cover" mode=""></image>
					<view class="type">
						<image v-if="item.active_info.type == 1" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/discover/run_recomm.png" mode=""></image>
						<image v-else-if="item.active_info.type == 2" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/discover/run_active.png" mode=""></image>
						<image v-else src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/discover/run_renwu.png" mode=""></image>
					</view>
				</view>
				<view class="order_info">
					<view class="order_info_t">
						<view class="title shenglueh">{{ item.active_info.name }}</view>
						<view class="price">￥{{ item.total_price }}</view>
					</view>
					<view class="order_info_b">
						<view class="date">时间：{{ item.active_info.start_time_a }}</view>
						<view class="area">地点：{{ item.active_info.city }}</view>
					</view>
				</view>
			</view>
			<!-- 默认费用项 -->
			<view class="cost">
				<view class="cost_content" >
					<view class="cost_content_r ">
						<view class="pay" v-if="item.state == 1" @tap="pay(item.id, item.active_info)">
							<i class="icon">&#xe670;</i>
							去支付
						</view>
						<view class="pay tick" v-else-if="item.state == 2 && item.active_info.type != 3 && item.verify == 1" @click="eticket(item.id)">
							<i class="icon">&#xe600;</i>
							电子票
						</view>
					</view>
					<view class="register_top_right" v-if="item.verify == 1">
						<span v-if="item.state == 0">已删除</span>
						<span v-else-if="item.state == 2 && nowTime < item.active_info.start_time_c">待参与</span>
						<span v-else-if="item.state == 2 && nowTime > item.active_info.start_time_c && nowTime < item.active_info.end_time_c">{{ item.active_name }}进行中</span>
						<span v-else-if="item.state == 2 && nowTime > item.active_info.end_time_c">{{ item.active_name }}已结束</span>
						<span v-else-if="item.state == 3">已退款</span>
						<span v-else-if="item.state == 4">已取消</span>
					</view>
					<view class="register_top_right" v-else>
						<span v-if="item.verify == 2">审核未通过</span>
						<span v-else-if="item.verify == 0 && item.state == 2">审核中</span>
						<span v-else-if="item.state == 1 ">待支付</span>
					</view>
				</view>
			<!-- 	<view class="cost_content" v-else>
					<view class="cost_content_r ">
					</view>
					<view class="register_top_right">
						<span v-if="item.verify == 2">审核未透过</span>
						<span v-else-if="item.verify == 0">审核中</span>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['list', 'nowTime'],
	data() {
		return {};
	},
	methods: {
		todetail(key, active, club_id) {
			this.$emit('todetail', { key: key, active: active, club_id: club_id });
		},
		pay(key, active) {
			this.$emit('topay', { key: key, activename: active.name });
		},
		eticket(key) {
			this.$emit('eticket', key);
		}
	}
};
</script>

<style lang="less" scoped>
.register_p {
	// border-bottom: 10upx solid #F2F2F2;
	background-color: #ffffff;
	border-radius: 20upx !important;
	overflow: hidden;
	margin-bottom: 20upx;
}
.register_top {
	padding: 0 30upx;
	height: 90upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	.register_top_left {
		display: flex;
		align-items: center;
		image {
			width: 60upx;
			height: 60upx;
			border-radius: 50%;
		}
		span {
			margin-left: 20upx;
			font-size: 26upx;
			color: #999999;
			line-height: 90upx;
		}
	}
}
.cost {
	width: 100%;
	padding: 0 20upx;
	height: 80upx;
	box-sizing: border-box;
	background-color: #ffffff;
	border-top: 2upx solid #e1e1e1;
	display: flex;
	align-items: center;
	.cost_content {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.cost_content_r {
			.pay {
				width: 140upx;
				height: 44upx;
				border-radius: 22upx;
				color: #8938d5;
				text-align: center;
				line-height: 44upx;
				font-size: 24upx;
				border: 2upx solid #8938d5;
			}
			.icon {
				font-size: 24upx;
				color: #8938d5;
				margin-right: 4upx;
			}
		}
		.register_top_right {
			span {
				display: block;
				color: #8837d2;
				font-size: 28upx;
				// font-weight: bold;
				line-height: 36upx;
			}
		}
	}
}
.order {
	width: 100%;
	// padding: 0 30upx;
	padding-left: 20upx;
	box-sizing: border-box;
	height: 140upx;
	margin: 20upx 0;
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;
	align-items: center;
	.order_pic {
		width: 250upx;
		height: 140upx;
		position: relative;
		margin-right: 20upx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
		.type {
			position: absolute;
			width: 50upx;
			height: 60upx;
			top: 0;
			left: 26upx;
			image {
				width: 50upx;
				height: 56upx;
				border-radius: 0;
			}
		}
	}
	.order_info {
		width: 400upx;
		// display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 140upx;
		.order_info_t {
			margin-bottom: 16upx;
		}
		.date,
		.area {
			font-size: 24upx;
			line-height: 32upx;
			color: #666;
		}
		.price {
			font-size: 24upx;
			color: #000;
			line-height: 32upx;
			margin-bottom: 6upx;
			margin-left: -4upx;
		}
		.title {
			font-size: 28upx;
			line-height: 28upx;
			color: #333333;
			font-weight: bold;
		}
	}
}
</style>

<style>
page {
	background-color: #f2f2f2;
}
</style>
